/*
  Label Styles
  ------------------------------------------------------------------------------
*/

@import 'src/style/modules';

.label {
  display: inline-flex;
  align-items: center;
  align-content: center;
  user-select: none;
  transition: background-color 0.25s ease;
  flex-wrap: nowrap;
}

.label--name {
  display: block;
  cursor: inherit;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}

.label--clickable {
  &,
  &:hover {
    cursor: pointer;
  }
}

.label--delete {
  display: block;
  background-color: transparent;
  position: relative;
  border: 0;
  outline: none;
  opacity: 0.4;
  transition: opacity 0.25s ease, width 0.25s ease, transform 0.25s ease;

  &:hover {
    opacity: 1;
    cursor: pointer;
  }
}

.label--delete-x {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: $ix-border;
  border-radius: $ix-border / 2;
  transform: translate(-50%, -50%) rotate(45deg);

  &:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/*
  Size Modifiers
  ------------------------------------------------------------------------------
*/

@mixin labelSizeModifier($fontSize, $padding, $height) {
  &,
  & + .additional-labels {
    border-radius: $height / 2;
    font-size: $fontSize;
    height: $height - $ix-marg-a;
  }

  .label--name {
    padding: 0 ($padding + $ix-border);
    height: $height - $ix-marg-a;
    line-height: $height - $ix-marg-a;
  }

  &.label--deletable {
    padding-right: $padding + $ix-border;
  }

  &.label--deletable .label--name {
    padding-right: 0;
  }

  .label--delete {
    height: $height - $ix-marg-a;
    transform: translateX($padding - $ix-border);
    width: 0;
  }

  &:hover .label--delete {
    width: $height - $ix-marg-a - $ix-border;
  }
}

.label--xs {
  @include labelSizeModifier($form-xs-font, $form-xs-padding, $form-xs-height);
}

.label--sm {
  @include labelSizeModifier($form-sm-font, $form-sm-padding, $form-sm-height);
}

.label--md {
  @include labelSizeModifier($form-md-font, $form-md-padding, $form-md-height);
}

.label--lg {
  @include labelSizeModifier($form-lg-font, $form-lg-padding, $form-lg-height);
}

.label--colorless {
  font-weight: 600;
  font-style: italic;

  &,
  &:hover {
    background-color: $g6-smoke;
    color: $g13-mist;
  }
}
